<!-- 支付页面组件，用于展示支付相关的 HTML 内容并自动提交表单 -->
<template>
  <!-- 使用 v-html 指令将 data 中的 HTML 内容渲染到页面，同时设置类名为 payment-box -->
  <!-- 当 data 中的 HTML 内容包含表单时，后续会自动提交该表单 -->
  <div v-html="data" class="payment-box">{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储从路由参数中获取的 HTML 内容，初始值为空字符串
      data: "",
    };
  },
  mounted() {
    // 从路由的查询参数中获取 HTML 数据，并赋值给 data 属性
    this.data = this.$route.query.htmlData;
    // 在下次 DOM 更新循环结束之后执行延迟回调
    this.$nextTick(() => {
      // 选择页面中的第一个表单元素并提交
      document.forms[0].submit();
    });
  },
};
</script>

<style lang="less" scoped>

.payment-nox {
  width: 1200px;
  height: 600px;
  margin: 0 auto;
}
</style>